<template>
    <div class="content-container-content__right" :style="coverDom">
        <img class="person" :src="img" />
    </div>
</template>

<script setup>
import {isMobileDevice} from '@/hooks'
defineProps({
    img: {
        type: String,
        default: null
    }
})
const coverDom = ref(null)

function mousemoveAnimate(selector) {
	const screenCenter = {
		x: document.body.clientHeight / 2,
		y: document.body.clientWidth / 2
	}

	function move(e) {
		const elementAnimate = document.querySelector('.animate')
		if (elementAnimate) {
			elementAnimate.classList.remove('animate')
		}
		const transformY = (screenCenter.y - e.clientY) / 120
		const transformX = (screenCenter.x - e.clientX) / 120
		selector.style.transform = `translate(${transformX}px, ${transformY}px)`
	}

	window.addEventListener('resize', function () {
		screenCenter.x = document.body.clientHeight / 2
		screenCenter.y = document.body.clientWidth / 2
	})

	onUnmounted(() => {
		document.body.removeEventListener('mousemove', move)
	})

	coverDom.value = selector
	document.body.addEventListener('mousemove', move)
}
onMounted(() => {
	const element = document.querySelector('.content-container-content__right')
	element.classList.add('animate')
	if(isMobileDevice()) return
	mousemoveAnimate(element)
})
</script>

<style scoped lang="scss">
.content-container-content__right {
	margin-bottom: 142px;
	@include respondTo(['phone','pad']) {
	    margin-bottom: 0;
		position: absolute;
		right: 20px;
		z-index: 11;
		top: 54px;
		padding: 20px 0;
		border-radius: 28px;
		box-shadow: 0 2px 8px rgba(14,21,47,0.25);
	}
}
.content-container-content__right.animate {
	animation: chanDong 3s ease-in-out infinite;
}
.person {
    width: 666px;
    height: 456px;
	@include respondTo(['phone','pad','notebook']) {
		display: none;
	}
}
@keyframes chanDong {
    0% {
        transform: translate(2px, 5px);
    }
    50% {
        transform: translate(4px, 8px);
    }
    100% {
        transform: translate(2px, 5px);
    }
}
</style>
